<template>
    <div>
        <el-form ref="eForm" :model="travelInfoForm" label-position="right" :rules="rules">
            <!--<el-form-item label="单据序号" :label-width="formLabelWidth" v-show="isIdShow">-->
            <!--    <el-input v-model="travelInfoForm.id" autocomplete="off" style="width: 400px" :disabled="isTicketInfoDisabled"></el-input>-->
            <!--</el-form-item>-->
            <el-form-item label="员工工号" :label-width="formLabelWidth" prop="empno">
                <el-input v-model="travelInfoForm.empno" autocomplete="off" style="width: 400px" :disabled="isTicketInfoDisabled"></el-input>
            </el-form-item>
            <el-form-item label="报销人" :label-width="formLabelWidth" prop="uname">
                <el-input v-model="travelInfoForm.uname" autocomplete="off" style="width: 400px" :disabled="isTicketInfoDisabled"></el-input>
            </el-form-item>
            <el-form-item label="出发时间" :label-width="formLabelWidth" prop="departureTime">
                <el-input v-model="travelInfoForm.departureTime" autocomplete="off" style="width: 400px" :disabled="isTicketInfoDisabled"></el-input>
            </el-form-item>
            <el-form-item label="返回时间" :label-width="formLabelWidth" prop="arrivalTime">
                <el-input v-model="travelInfoForm.arrivalTime" autocomplete="off" style="width: 400px" :disabled="isTicketInfoDisabled"></el-input>
            </el-form-item>
            <el-form-item label="报销金额" :label-width="formLabelWidth" prop="reimbursement">
                <el-input v-model="travelInfoForm.reimbursement" autocomplete="off" style="width: 200px" :disabled="isTicketInfoDisabled"></el-input>
                大写 {{capitalAmount}}
            </el-form-item>
            <el-form-item label="出差事由" :label-width="formLabelWidth" prop="instruction">
                <el-input v-model="travelInfoForm.instruction" autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="报销时间" :label-width="formLabelWidth" prop="reimbursementTime">
                <el-input v-model="travelInfoForm.reimbursementTime" autocomplete="off" style="width: 400px" :disabled="isTicketInfoDisabled"></el-input>
            </el-form-item>
            <el-form-item label="补助天数" :label-width="formLabelWidth" prop="day">
                <el-input v-model="travelInfoForm.day" autocomplete="off" style="width: 400px" :disabled="isTicketInfoDisabled"></el-input>
            </el-form-item>
            <el-form-item label="补助金额" :label-width="formLabelWidth" prop="subsidy">
                <el-input v-model="travelInfoForm.subsidy" autocomplete="off" style="width: 400px" :disabled="isTicketInfoDisabled"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" round @click="dialogTableVisible = true">选择车票信息</el-button>
            <el-button type="primary" @click="saveTravelInfo">保 存</el-button>
            <el-button type="primary" @click="resetForm">重 置</el-button>
        </div>
        <br>
        <el-table
            :data="selectTicketInfoData"
            border
            style="width: 100%">
            <el-table-column
                prop="date"
                label="序号"
                width="180">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                prop="date"
                label="出发时间"
                width="180">
                <template slot-scope="scope">{{ scope.row.departureTime }}</template>
            </el-table-column>
            <el-table-column
                prop="date"
                label="出发地点"
                width="180">
                <template slot-scope="scope">{{ scope.row.departurePoint }}</template>
            </el-table-column>
            <el-table-column
                prop="date"
                label="到达时间"
                width="180">
                <template slot-scope="scope">{{ scope.row.arrivalTime }}</template>
            </el-table-column>
            <el-table-column
                prop="date"
                label="到达地点"
                width="180">
                <template slot-scope="scope">{{ scope.row.arrivalLocation }}</template>
            </el-table-column>
            <el-table-column
                prop="date"
                label="类型"
                width="180">
                <template slot-scope="scope">{{ scope.row.type }}</template>
            </el-table-column>
            <el-table-column
                prop="address"
                label="车票金额">
                <template slot-scope="scope">{{ scope.row.reimbursement }}</template>
            </el-table-column>
        </el-table>
        <br>
        <el-dialog title="选择车票信息" :visible.sync="dialogTableVisible">
            <el-table
                ref="multipleTable"
                :data="ticketInfoData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="departurePoint"
                    label="出发地点"
                    width="120">
                    <template slot-scope="scope">{{ scope.row.departurePoint }}</template>
                </el-table-column>
                <el-table-column
                    prop="arrivalLocation"
                    label="到达地点"
                    width="100">
                    <template slot-scope="scope">{{ scope.row.arrivalLocation }}</template>
                </el-table-column>
                <el-table-column
                    prop="departureTime"
                    label="出发时间"
                    width="160">
                    <template slot-scope="scope">{{ scope.row.departureTime }}</template>
                </el-table-column>
                <el-table-column
                    prop="arrivalTime"
                    label="到达时间"
                    width="160">
                    <template slot-scope="scope">{{ scope.row.arrivalTime }}</template>
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="类型"
                    width="60">
                    <template slot-scope="scope">{{ scope.row.type }}</template>
                </el-table-column>
                <el-table-column
                    prop="reimbursementTime"
                    label="车票金额"
                    width="120">
                    <template slot-scope="scope">{{ scope.row.reimbursement }}</template>
                </el-table-column>
            </el-table>
            <el-button type="primary" @click="selectTicketInfo">确 定</el-button>
            <el-pagination
                background
                @size-change="getSize"
                @current-change="getCurrent"
                :page-sizes="[5, 10, 15, 20]"
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="queryMap.page"
                :page-size="queryMap.limit"
                :total="total">
            </el-pagination>

        </el-dialog>
    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            capitalAmount: '',
            current_date: '',
            isIdShow: true,
            transportationlist: [],
            isTicketInfoDisabled: true,
            travelInfoForm: {
                reimbursementTime: '',
                uname: '',
                uid: '',
                departureTime: '',
                arrivalTime: '',
                reimbursement: '',
                instruction: '',
                day: '',
                subsidy: ''
            },
            dialogTableVisible: false,
            dialogFormVisible: false,
            formLabelWidth: '120px',
            ticketInfoData: [],
            selectTicketInfoData: [],
            checkData: [],
            queryMap: {
                page: 1,
                limit: 10,
                departurePoint: '',
                arrivalLocation: '',
                empno: this.$store.getters.getUid
            },
            total: 0,
            travelInfoData: [],
            updateTickets: {
                ticketIds: [],
                travelInfoId: 0
            },
            rules: {
                instruction: [
                    {required: true, message: "输入出差事由", trigger: "blur"}
                ],
            },
        };
    },
    computed: {

    },
    watch: {},
    methods: {
        saveTravelInfo() {
            this.$refs['eForm'].validate((valid) => {
                //如果校验都通过，那么valid为true
                if (valid) {
                    //请求后台。传递表单数据进行保存
                    this.$http.post("/travelInfo/addTravelInfo", this.travelInfoForm).then(res => {
                        debugger
                        if (res.data.code === "200") {
                            this.updateTickets.travelInfoId = res.data.tid
                            this.dialogFormVisible = false
                            this.$message.success("新增成功")
                            this.updateTicketInfo()
                            this.$router.push('/travelListPage')
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        updateTicketInfo() {
            this.$http.post("/ticketInfo/updateTicketInfoByIds", this.updateTickets).then(res => {
                console.log(res.data);
            })
        },
        resetForm() {
            this.travelInfoForm = {
                empno: '',
                uname: '',
                departureTime: '',
                arrivalTime: '',
                reimbursement: '',
                instruction: '',
                reimbursementTime: '',
                day: '',
                subsidy: '',
            }
            this.$refs['eForm'].resetFields()
            this.selectTicketInfoData = []
        },
        handleSelectionChange(val) {
            this.checkData = val
        },
        getSize(val) {
            this.queryMap.limit = val
            this.getTicketInfoData()
        },
        getCurrent(val) {
            this.queryMap.page = val
            this.getTicketInfoData()
        },
        getTicketInfoData() {
            //调用后台，获取数据
            this.$http.post("/ticketInfo/ticketInfoList01", this.queryMap).then(res => {
                this.ticketInfoData = res.data.data  //列表数据
                this.total = res.data.count  //总条数
            })
        },
        selectTicketInfo() {
            let ids = []
            for (let i = 0; i < this.checkData.length; i++) {
                ids[i] = this.checkData[i].id
            }
            this.updateTickets.ticketIds = ids
            this.$http.post("/ticketInfo/isRing", ids).then(res => {
                if (res.data.code === "500") {
                    this.$message.warning("不是一个闭合环路")
                    return
                }
                this.dialogTableVisible = false
                // console.log(res.data.data)
                //res.data  对应的是后台的return值
                // console.log(res.data)s
                // this.travelInfoData = res.data  //列表数据
                this.travelInfoForm = res.data.travelInfo
                this.selectTicketInfoData = res.data.ticketInfos
                this.travelInfoForm.reimbursementTime = this.getCurrentTime()
                this.travelInfoForm.uname = this.$store.getters.getUname
                this.travelInfoForm.empno = this.$store.getters.getUid
                this.capitalAmount = res.data.capitalAmount
            })
        },
        getCurrentTime() {
            //获取当前时间并打印
            var _this = this;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            mm = mm < 10 ? '0'+ mm : mm
            let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
            let hh = new Date().getHours();
            let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
            let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
            _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
            return _this.gettime
            // this.travelInfoForm.reimbursementTime = _this.gettime
        }
    },
    beforeCreate() {
    },

    created() {

    },

    beforeMount() {

    },

    mounted() {
        this.getTicketInfoData()
        this.getCurrentTime()
    },


    beforeUpdate() {

    },

    updated() {

    },

    beforeDestroy() {

    },
    destroyed() {

    },

    activated() {

    },
}

</script>

<style scoped>

</style>